<template>
  <div
    class="versionMemberDrawer-container"
    :class="[visible ? 'show' : 'hide']"
  >
    <div class="versionMemberDrawer-body">
      <div class="header">
        构件变更详情<a-icon type="close" @click="handleClose()" />
      </div>
      <div class="body">
        <div class="tabs-button-container">
          <div
            v-for="(item, index) in this.tabsButton"
            :key="index"
            class="tab-btn"
            @click="handelTabs(item, index)"
            :class="[activeIndex == index && 'active']"
          >
            {{ item.label }}<span class="num">{{ item.count || 0 }}</span>
          </div>
        </div>
        <div class="search-condition">
          <a-input-search
            placeholder="请输入"
            style="width: 100%"
            @search="onSearch"
            v-model="elemName"
          />
        </div>
        <div class="tree-container">
          <a-spin :spinning="spinning">
            <a-empty :description="false" v-if="treeData.length == 0" />
            <a-tree
              v-else
              show-icon
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeys"
              :tree-data="treeData"
              @expand="onExpand"
              @select="onSelect"
              :replaceFields="{
                children: 'children',
                title: 'fileName',
                key: 'elemIntId',
              }"
              :load-data="onLoadData"
            >
              <!-- 自定义图标 -->
              <template slot="custom" slot-scope="{ children }">
                <icon-font
                  :type="
                    children.length > 0 ? 'icon-wenjianjia-' : 'icon-a-moxing1'
                  "
                />
              </template>
              <template slot="title" slot-scope="{ fileName, elemName }">
                <span :title="fileName || elemName">
                  {{ fileName || elemName }}
                </span>
              </template>
            </a-tree>
          </a-spin>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 构件
import { axios } from "@/utils/request";
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
import { addAttributeByKey } from "@/utils/util.js";
export default {
  inject: ["currentSoucre", "currentData"],
  components: {
    IconFont,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeIndex: null,
      treeData: [],
      expandedKeys: [],
      autoExpandParent: true,
      selectedKeys: [],
      //构件名称
      elemName: "",
      tabsButton: {},
      currentButton: {},
      spinning: false,
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.dealWithTabs();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //处理顶部数据
    dealWithTabs() {
      let list = this.currentData();
      let soucre = {
        A: {
          label: "新增",
        },
        D: {
          label: "删除",
        },
        M: {
          label: "修改",
        },
      };
      list.forEach((v) => {
        soucre[v.dataType] = {
          label: soucre[v.dataType].label,
          ...v,
        };
      });
      this.tabsButton = soucre;
    },

    handelTabs(item, index) {
      this.activeIndex = index;
      this.currentButton = item;
      this.getData();
    },

    //查询变革列表
    getData() {
      this.spinning = true;
      return new Promise((resolve, reject) => {
        let { token, dataSetId, fromVersion, toVersion } = this.currentSoucre();
        let { elemName } = this;
        let { dataType } = this.currentButton;
        axios
          .post(
            `/probusiness/blackHole3D/project/versionContrast/fileList`,
            {
              dataSetId,
              fromVersion,
              toVersion,
              dataType,
              elemName,
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let tree = res?.data ?? [];
            tree.forEach((item) => {
              this.$set(item, "children", []);
            });
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              tree,
              "children"
            );
            this.treeData = filterData;
            resolve();
          })
          .catch((_) => {
            this.treeData = [];
            reject();
          })
          .finally((_) => {
            this.spinning = false;
          });
      });
    },
    //查询子级
    onLoadData(treeNode) {
      return new Promise((resolve, reject) => {
        let { token, dataSetId, fromVersion, toVersion } = this.currentSoucre();
        let { elemName } = this;
        let { dataType } = this.currentButton;
        let { hostFileId } = treeNode.dataRef;
        if (!hostFileId) {
          return resolve();
        }
        axios
          .post(
            `/probusiness/blackHole3D/project/versionContrast/elemList`,
            {
              dataSetId,
              fromVersion,
              toVersion,
              dataType,
              elemName,
              hostFileId,
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let tree = res?.data ?? [];
            tree.forEach((item) => {
              this.$set(item, "children", []);
            });
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              tree,
              "children"
            );
            treeNode.dataRef.children = filterData;
            this.treeData = [...this.treeData];
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },
    //树展开
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    //树选择
    onSelect(selectedKeys, info) {
      let { elemIntId } = info.node.dataRef;
      this.$emit("onSelect", elemIntId);
    },
    //查询
    onSearch() {},
    //关闭
    handleClose() {
      this.$emit("update:visible", false);
      this.$emit("close", false);
    },

    //指定长度和基数
    _getUUID(len, radix) {
      var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
        ""
      );
      var uuid = [],
        i;
      radix = radix || chars.length;
      if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
      } else {
        var r;
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
        uuid[14] = "4";
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | (Math.random() * 16);
            uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
          }
        }
      }
      return uuid.join("");
    },
  },
};
</script>

<style lang="less" scoped>
.versionMemberDrawer-container {
  position: absolute;
  width: 300px;
  height: 100%;
  top: 0;
  pointer-events: none;
  transition: 0.3s;
  left: 10px;
  box-sizing: border-box;
  padding: 80px 0 80px 0;
  &.hide {
    left: -100%;
  }
  .versionMemberDrawer-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 6px;
    pointer-events: all;
    .header {
      flex-shrink: 0;
      height: 36px;
      background: #f0f0f0;
      border-radius: 6px 6px 0px 0px;
      border: 1px solid #d9d9d9;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 16px;
      font-size: 16px;
      color: #333333;
      position: relative;
      .anticon-close {
        color: #8c8c8c;
        font-size: 15px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
      }
    }
    .body {
      flex: 1;
      background: #fff;
      padding: 0 0 10px 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .tabs-button-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        .tab-btn {
          width: 100px;
          display: flex;
          padding: 10px 5px 10px 16px;
          font-size: 12px;
          cursor: pointer;
          border-radius: 4px;
          margin-right: 10px;
          border: 1px solid #d9d9d9;
          color: #333333;
          position: relative;
          &::before {
            content: "";
            width: 5px;
            height: 5px;
            margin: auto 5px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 16px;
          }
          &:nth-child(1) {
            &::before {
              background: #4bc964;
            }
          }
          &:nth-child(2) {
            &::before {
              background: #ff3f4a;
            }
          }
          &:nth-child(3) {
            &::before {
              background: #f8ad16;
            }
          }
          &:last-of-type {
            margin-right: 0;
          }
          .num {
            padding-left: 10px;
          }
          &.active {
            background: rgba(22, 119, 255, 0.1);
            color: #1677ff;
            &::before {
              background: #1677ff;
            }
          }
        }
      }
      .search-condition {
        flex-shrink: 0;
        padding: 0 16px 10px 16px;
        position: relative;
      }
      .tree-container {
        flex: 1;
        padding: 0 10px;
        overflow: auto;
        overflow-x: hidden;
        position: relative;
        /deep/.ant-tree {
          li {
            width: 100%;
            .ant-tree-node-content-wrapper {
              position: relative;
              width: calc(100% - 34px);
              padding: 0 5px 0 0;
              .ant-tree-iconEle {
                color: #f3ab1f;
                font-size: 16px;
              }
              .ant-tree-title {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
                max-width: calc(100% - 40px);
              }
            }
          }
        }
        /deep/.ant-spin-nested-loading {
          height: 100%;
          .ant-spin {
            max-height: 100%;
          }
          .ant-spin-container {
            height: 100%;
          }
        }

        /deep/.ant-empty {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}
</style>
